﻿<UserControl x:Class="TestRunner.Views.ToolbarFormatView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:windowsToolbar="clr-namespace:Windows.Toolbar.Controls;assembly=Windows.Toolbar"
    xmlns:windowsToolbarSpecialized="clr-namespace:Windows.Toolbar.Controls.Specialized;assembly=Windows.Toolbar"             
    xmlns:windowsToolkit="clr-namespace:Windows.Toolkit;assembly=Windows.Toolkit"                          
    xmlns:fx="clr-namespace:TestRunner.Common"
    xmlns:vm="clr-namespace:TestRunner.ViewModels"
    d:DataContext="{d:DesignInstance Type=vm:ToolbarViewModel, IsDesignTimeCreatable=False}" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"                                       
    mc:Ignorable="d">
    <UserControl.Resources>
        <windowsToolbar:ColorConverter x:Key="ColorConverter" />
        <windowsToolkit:BooleanEnumConverter x:Key="BooleanEnumConverter" />
        
        <fx:Command x:Key="FillCommand" Method="FillShape"/>
        <fx:Command x:Key="BorderColorCommand" Method="ChangeBorderColorShape"/>
        <fx:Command x:Key="BorderWidthCommand" Method="ChangeBorderWidthShape"/>
        <fx:Command x:Key="BorderStyleCommand" Method="ChangeBorderStyleShape"/>
        <fx:Command x:Key="FontColorCommand" Method="ChangeFontColor"/>
    </UserControl.Resources>


    <windowsToolbar:ToolbarGroup Footer="Format">
        
        <StackPanel VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal" Margin="0,0,0,8">

                <!-- Font Family Selection -->                                
                <ComboBox ItemsSource="{Binding FontFamilies}" FontSize="10" Height="22" Margin="0,0,4,0" Width="147"
                          SelectedItem="{Binding SelectedFontFamily, Mode=TwoWay}"
                     ToolTipService.ToolTip="Font">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" FontFamily="{Binding}" />
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
                
                
                <!-- Font Size Selection -->
                
                <ComboBox ItemsSource="{Binding FontSizes}" FontSize="10" Height="22" Margin="0,0,4,0" Width="60" Grid.Column="1" 
                          SelectedItem="{Binding SelectedFontSize, Mode=TwoWay}"
            		 ToolTipService.ToolTip="Font Size">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding}" />
                                <TextBlock Text="pt" Margin="5,0,0,0" />
                            </StackPanel>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
                
                <Canvas Grid.Column="2">
                    
                    <windowsToolbar:ToolbarToggleButton CornerRadius="3,0,0,3" Width="22" ToolTipService.ToolTip="Align Left"
            			IsChecked="{Binding SelectedTextAligment, Mode=TwoWay, Converter={StaticResource BooleanEnumConverter}, ConverterParameter=Left}">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <Image Source="/TestRunner;component/Resources/ParagraphAlignLeft.png" />
                    </windowsToolbar:ToolbarToggleButton>
                    
                    
                    
                    <windowsToolbar:ToolbarToggleButton CornerRadius="0" Width="22" Canvas.Left="21" ToolTipService.ToolTip="Align Center"
            			IsChecked="{Binding SelectedTextAligment, Mode=TwoWay, Converter={StaticResource BooleanEnumConverter}, ConverterParameter=Center}">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <Image Source="/TestRunner;component/Resources/ParagraphAlignCentre.png" />
                    </windowsToolbar:ToolbarToggleButton>
                    
                    
                    
                    <windowsToolbar:ToolbarToggleButton CornerRadius="0,3,3,0" Width="22" Canvas.Left="42" ToolTipService.ToolTip="Align Right"
            			IsChecked="{Binding SelectedTextAligment, Mode=TwoWay, Converter={StaticResource BooleanEnumConverter}, ConverterParameter=Right}">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <Image Source="/TestRunner;component/Resources/ParagraphAlignRight.png" />
                    </windowsToolbar:ToolbarToggleButton>
                    
                </Canvas>
            </StackPanel>

            <StackPanel Orientation="Horizontal">
                <Canvas Width="103" Margin="0,0,4,0">

                    <!-- Background Color Selection -->
                    
                    <windowsToolbar:ToolbarDropDownButton x:Name="BackgroundButton" Width="35" CornerRadius="3,0,0,3" 
						Command="{StaticResource FillCommand}"
	                    SelectedValue="{Binding SelectedBackgroundColor, Mode=TwoWay}" ToolTipService.ToolTip="Background Color">

                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <windowsToolbar:ToolbarDropDownButton.SelectionContainer>
                            <windowsToolbarSpecialized:ColorPicker />
                        </windowsToolbar:ToolbarDropDownButton.SelectionContainer>

                        <Canvas HorizontalAlignment="Center" Width="16" Height="18">
                            <Image Source="/TestRunner;component/Resources/Shading.png"/>
                            <Rectangle Canvas.Left="0" Canvas.Top="12" Width="16" Height="4" 
                                       
                                       Fill="{Binding SelectedValue, Converter={StaticResource ColorConverter}, ElementName=BackgroundButton, Mode=OneWay}" />
                        </Canvas>
                    </windowsToolbar:ToolbarDropDownButton>
                    
                    <!-- Border Color Selection -->
                    
                    <windowsToolbar:ToolbarDropDownButton x:Name="BorderButton" Width="35" Canvas.Left="34" CornerRadius="0" 
						Command="{StaticResource BorderColorCommand}"
	                    SelectedValue="{Binding SelectedBordercolor, Mode=TwoWay}" ToolTipService.ToolTip="Border Bolor">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <windowsToolbar:ToolbarDropDownButton.SelectionContainer>
                            <windowsToolbarSpecialized:ColorPicker />
                        </windowsToolbar:ToolbarDropDownButton.SelectionContainer>

                        <Canvas HorizontalAlignment="Center" Width="16" Height="18">
                            <Image Source="/TestRunner;component/Resources/Pencil.png"/>
                            <Rectangle Canvas.Left="0" Canvas.Top="12" Width="16" Height="4" 
                                   Fill="{Binding SelectedValue, Converter={StaticResource ColorConverter}, ElementName=BorderButton, Mode=OneWay}"
						          />
                        </Canvas>
                    </windowsToolbar:ToolbarDropDownButton>
                    
                    <!-- Font Color Selection -->
                    
                    <windowsToolbar:ToolbarDropDownButton x:Name="FontButton" Width="35" Canvas.Left="68" CornerRadius="0,3,3,0" 
						Command="{StaticResource FontColorCommand}"                                                  
	                    SelectedValue="{Binding SelectedFontColor, Mode=TwoWay}" ToolTipService.ToolTip="Font Color">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <windowsToolbar:ToolbarDropDownButton.SelectionContainer>
                            <windowsToolbarSpecialized:ColorPicker />
                        </windowsToolbar:ToolbarDropDownButton.SelectionContainer>

                        
                        <Canvas HorizontalAlignment="Center" Width="16" Height="18">
                            <Image Source="/TestRunner;component/Resources/FontColor.png"/>
                            <Rectangle Canvas.Left="0" Canvas.Top="12" Width="16" Height="4" 
                                       Fill="{Binding SelectedValue, Converter={StaticResource ColorConverter}, ElementName=FontButton, Mode=OneWay}"
						          />
                        </Canvas>
                    </windowsToolbar:ToolbarDropDownButton>
                    
                </Canvas>

                <Canvas Width="64" Margin="0,0,4,0">
                    <!-- Bold Toggle -->
                    
                    <windowsToolbar:ToolbarToggleButton CornerRadius="3,0,0,3" Width="22"
                        IsChecked="{Binding SelectedFontIsBold, Mode=TwoWay}" ToolTipService.ToolTip="Bold">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <Image Source="/TestRunner;component/Resources/Bold.png" />
                    </windowsToolbar:ToolbarToggleButton>
                    
                    
                    <!-- Italic Toggle -->                    
                    <windowsToolbar:ToolbarToggleButton CornerRadius="0" Width="22" Canvas.Left="21"
                        IsChecked="{Binding SelectedFontIsItalic, Mode=TwoWay}" ToolTipService.ToolTip="Italic">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <Image Source="/TestRunner;component/Resources/Italic.png" />
                    </windowsToolbar:ToolbarToggleButton>                    
                    
                    <!-- Underline Toggle -->                    
                    <windowsToolbar:ToolbarToggleButton CornerRadius="0,3,3,0" Width="22" Canvas.Left="42"
                        IsChecked="{Binding SelectedFontIsUnderline, Mode=TwoWay}" ToolTipService.ToolTip="Underline">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <Image Source="/TestRunner;component/Resources/Underline.png" />
                    </windowsToolbar:ToolbarToggleButton>                    
                </Canvas>

                <Canvas Width="103" Height="22">
                    <!-- Line Thickness Selection -->
                    
                    <windowsToolbar:ToolbarDropDownButton Width="35" Height="22" CornerRadius="3,0,0,3" 
                        Command="{StaticResource BorderWidthCommand}"                                                          
						SelectedValue="{Binding SelectedBorderThickness, Mode=TwoWay}" ToolTipService.ToolTip="Border Thickness">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <windowsToolbar:ToolbarDropDownButton.SelectionContainer>
                            <windowsToolbarSpecialized:LinePicker />
                        </windowsToolbar:ToolbarDropDownButton.SelectionContainer>

                        <Image Source="/TestRunner;component/Resources/LineWidth.png" />
                    </windowsToolbar:ToolbarDropDownButton>
                    
                    
                    <!-- Line Style Selection -->                    
                    <windowsToolbar:ToolbarDropDownButton Width="35" Height="22" CornerRadius="0" Canvas.Left="34" 
						Command="{StaticResource BorderStyleCommand}"
						SelectedValue="{Binding SelectedBorderStyle, Mode=TwoWay}" ToolTipService.ToolTip="Border Style">
                        <i:Interaction.Behaviors>
                            <windowsToolbar:BringButtonToFrontBehaviour />
                        </i:Interaction.Behaviors>

                        <windowsToolbar:ToolbarDropDownButton.SelectionContainer>
                            <windowsToolbarSpecialized:LineStylePicker />
                        </windowsToolbar:ToolbarDropDownButton.SelectionContainer>

                        <Image Source="/TestRunner;component/Resources/LineStyle.png" />
                    </windowsToolbar:ToolbarDropDownButton>
                    
                </Canvas>
            </StackPanel>
        </StackPanel>         
    </windowsToolbar:ToolbarGroup>
</UserControl>
